<template>
  <div>
    <div class="title">
        particulars
        <br>
        贫困户详情
    </div>
    <div class="mbx">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/pinkunView' }">贫困户</el-breadcrumb-item>
            <el-breadcrumb-item >贫困户详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="particulars">
        <div class="img">
            <img :src="this.info.cover" alt="">
        </div>
        <div class="lable">
            <el-descriptions title="详情信息" direction="horizontal" :column="1" border>
                <el-descriptions-item label="编号">{{this.info.id}}</el-descriptions-item>
                <el-descriptions-item label="名字">{{this.info.name}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{this.info.createTime}}</el-descriptions-item>
                <el-descriptions-item label="账号">{{this.info.username}}</el-descriptions-item>
                <el-descriptions-item label="详细介绍">{{this.info.introduce}}</el-descriptions-item>
                <el-descriptions-item label="家庭成员">{{this.info.member}}</el-descriptions-item>、
                <el-descriptions-item label="成员人数">{{this.info.number}}</el-descriptions-item>
            </el-descriptions>
        </div>
        
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            info:[]
        }
    },
    methods:{
        async getInfo(){
            let{ data : res } = await this.$axios.get(`/poor/getlist?pageNum=1&pageSize=4&id=${this.$route.params.id}`)
            this.info = res.data.list[0]
            console.log(this.info);
            console.log(this.info.cover);
        }
    },
    created(){  
        this.getInfo()

    }
}
</script>

<style lang="scss" scoped>
.title{
    margin: 0 auto ;
    width: 80%;
    font-size: 25px;
    text-align: center;
    color: white;
    background: rgb(0,122,204);
}
.particulars{
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-direction: row;
        margin-top: 30px;
;
}
.img{
    width: 48%;
    img{
        width: 100%;
        height: 400px;
    }
}
.lable{
    width: 48%;
    background-color: #e3f1f1;

}
.mbx{  
    margin: 0 auto;
    width: 80%;
    margin-top: 30px;
}
</style>